import React, {FC, useState} from 'react';
import Title from "./components/Title";
import {TimerProps, TimerResult} from "./types/timer";
import HorizontalTitle from './components/HorizontalTitle'
import WeekAndHalfHour from "./components/WeekAndHalfHour";
import {deepClone} from './util'
import './css/index.css'
import {data} from './mock'

const Timer: FC<TimerProps> = (props: TimerProps) => {
	const {style, themeColor = '#5084f6', width = 600} = props
	const containerWith = width < 600 ? 600 : width
	const [timerInfo, setTimerInfo] = useState<TimerResult[]>(deepClone(data))
	const [canBeClear, setCanBeClear] = useState<boolean>(false)
	const changeTimer = (timerInfo: TimerResult[]) => {
		setTimerInfo(deepClone(timerInfo))
	}
	const renderWeekAndHalfHour = () => {
		return !canBeClear?timerInfo.map(item =>
			<WeekAndHalfHour
				timerInfo={timerInfo}
				key={item.key}
				width={containerWith}
				themeColor={themeColor}
				weekKey={item.key}
				weekName={item.weekName}
				changeTimer={changeTimer}
				canBeClear={canBeClear}
			/>):null
	}
	const renderTime = () => timerInfo.map(item => (
		<div key={item.key} className='time_list'>
			<i>
				{item.resultShow.length === 0 ? null : item.weekName}
			</i>
				{
					item.resultShow.map((text, index) => <span key={index}>{text}</span>)
				}
		</div>
	))
	const clear = ()=>{
		setTimerInfo(deepClone(data))
		setCanBeClear(true)
		setCanBeClear(false)
	}

	return (
		<div style={{
			width: containerWith,
			border: "solid 1px #f3f3f3",
			...style
		}}>
			<Title
				style={style}
				themeColor={themeColor}
			/>
			<HorizontalTitle
				width={containerWith}
			/>
			{renderWeekAndHalfHour()}
			<span>
				已选择时间段
				<span onClick={clear}>清空</span>
			</span>
			<div>
				{renderTime()}
			</div>
		</div>
	)
}
export default Timer